<template>
  <div>

    <h2>v-model的原理</h2>

    <!-- <input type="text" :value="uname" @input="onInput" /> -->


    <!-- 在template区域，如果使用事件对象，则使用 $event -->
    <!-- <input type="text" :value="uname" @input="uname = $event.target.value" /> -->
    <!-- 综上所述： v-model 相当于 :value + @input -->

    <!-- <input type="checkbox" :checked="flag" @change="flag = $event.target.checked" /> -->
    <!-- 综上所述： 对于单个复选框来说： v-model 相当于 :checked + @change -->


    <!-- 使用子组件 -->
    <!-- <my-input :value="uname" @input="val => { uname = val }"></my-input> -->

    <my-input v-model="uname"></my-input>

  </div>
</template>

<script>

import MyInput from './components/MyInput.vue'

export default {
  components: { MyInput },
  data() {
    return {
      uname: 'zhangsan',
      flag: true
    }
  }
  // methods: {
  //   oninput (e) {
  //     console.log(111)
  //     this.uname = e.target.value
  //   }
  // }
}
</script>

<style>

</style>